<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ include file="/commons/pages/taglibs.jsp" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>TN3 Gallery - Example 1</title>

<style type="text/css">
body {
	margin: 50px 0px;
	padding: 0px;
	background-color: #000000;
	color: #ffffff;
}

#content {
	width: 620px;
	margin: 0px auto;
}

#desc {
	margin: 10px;
	float: left;
	font-family: Arial, sans-serif;
	font-size: 12px;
}
</style>

<!-- include CSS always before including js -->
<link type="text/css" rel="stylesheet"
	href="commons/scripts/TN3Gallery/skins/tn3/tn3.css"></link>
<!-- include jQuery library -->
<script type="text/javascript" src="commons/scripts/jquery.min.js"></script>
<!-- include tn3 plugin -->
<script type="text/javascript"
	src="commons/scripts/TN3Gallery/js/jquery.tn3lite.src.js"></script>

<!--  initialize the TN3 when the DOM is ready -->
<script type="text/javascript">
	$(document).ready(function() {
		//Thumbnailer.config.shaderOpacity = 1;
		var tn1 = $('.mygallery').tn3({
			skinDir : "skins",
			imageClick : "fullscreen",
			image : {
				maxZoom : 1.5,
				crop : true,
				clickEvent : "dblclick",
				transitions : [ {
					type : "blinds"
				}, {
					type : "grid"
				}, {
					type : "grid",
					duration : 460,
					easing : "easeInQuad",
					gridX : 1,
					gridY : 8,
					// flat, diagonal, circle, random
					sort : "random",
					sortReverse : false,
					diagonalStart : "bl",
					// fade, scale
					method : "scale",
					partDuration : 360,
					partEasing : "easeOutSine",
					partDirection : "left"
				} ]
			}
		});
		//$(".tn3-fullscreen").click();
	});
</script>
</head>
<body>
	<div id="content">
		<div class="mygallery">
			<div class="tn3 album">
				<ol>
					<c:forEach items="${productList}" var="cur">
						<li>
							<h4>${cur.accessory_main.title}</h4>
							<div class="tn3 description">${cur.accessory_main.description}</div> <a
							href="${ctx}/${cur.accessory_main.save_url}"> <img
								src="${ctx}/${cur.accessory_sub.save_url}" /> </a>
						</li>
					 </c:forEach>
				</ol>
			</div>
		</div>
	</div>
</body>
</html>